<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" href="css/public.css">
    <script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <style>
        body{
            background: rgb(240,240,240);
        }
        .header .set{
            position: absolute;
            right: -25px;
            top: 0;
            font-size: 0.6rem;
            color: #777777;

        }
        .header .center{
            overflow: hidden;
            width: 200px;
            border-radius: 5px;
            border:1px solid #ff6d82;
            height: 20px;
            margin-top: 10px;
            position: absolute;
            left:50%;
            margin-left: -100px;

        }
        .header .center p{
            float: left;
            text-align: center;
            width: 50%;
            margin: 0;
            font-size: 0.6rem;
            line-height: 20px;
            color:#ff6d82;
        }
        .header{
            overflow: hidden;
            position: relative;
        }
        .main .top{
            background: rgb(234,60,85);
            font-size: 0.65rem;
            text-align: center;
            color: #ffffff;
            padding: 10px 0;
        }
        .main .top p:nth-child(2){
            margin-top: 5px;
            font-size: 1.5rem;
        }
        .main .top p:last-child{
            font-size: 0.6rem;
            margin-top: 5px;
        }
        .top_bot{
            background: #ffffff;
            padding: 10px 0;
            box-sizing: border-box;
            overflow: hidden;
        }
        .top_bot ul li{
            float: left;
            width: 50%;
            box-sizing: border-box;
            font-size: 0.65rem;
            text-align: center;
            border-right: 1px solid #cccccc;
        }
        .red{
            color: red;
        }
        h4{
            font-size: 0.75rem;
            font-weight: 300;
            padding: 10px;
        }
        .list{
            background: #ffffff;
            font-size: 0.7rem;
        }
       .list li{
           padding: 5px 10px 10px 15px;
           border-bottom: 1px solid #cccccc;
       }
        .list li p{
            margin-top: 5px;
        }
        .list li strong{
            font-weight: 500;
            float: right;
        }
        .gray{
            color: #777777;
        }
        .green{
            color: green;
        }
        .footer{
            font-size: 0.65rem;
            text-align: center;
            padding: 15px 0;
        }
        .center .active{
            background: #ff6d82;
            color: #ffffff !important;
        }
        /*商圈收益*/
        /*.header_info .header_info-top{*/
            /*height: 80px;*/
            /*background: #fe6d82;*/
            /*overflow: hidden;*/
        /*}*/
        /*.header_info .header_info_touxiang{*/
            /*width: 70px;*/
            /*height: 70px;*/
            /*padding: 10px;*/
            /*padding-right: 0px;*/
            /*float: left;*/
        /*}*/
        /*.header_info .header_info_touxiang img{*/
            /*border-radius: 360px;*/
            /*width: 60px;*/
            /*height: 60px;*/
            /*border: 2px solid #ffffff;*/
            /*box-sizing: border-box;*/
        /*}*/
        /*.header_info .header_info_name{*/
            /*padding-top:20px;*/
        /*}*/
        /*.header_info .header_info_name p{*/
            /*font-size: 0.68rem;*/
            /*color: #ffffff;*/
            /*line-height: 20px;*/
        /*}*/
        /*.header_info .header_info_name p span{*/
            /*color: #ffc001;*/
        /*}*/
        /*.header_info .header_info_name p time{*/
            /*font-size: 0.6rem;*/
        /*}*/
        /*.header_info .header_info_name p:first-child{*/
            /*font-size: 0.73rem;*/
        /*}*/
        /*.header_info .ionc{*/
            /*width: 30px;*/
            /*height: 30px;*/
            /*float: right;*/
            /*position: relative;*/
            /*top:-30px;*/
            /*background: url("img/ionc.png") no-repeat 0px -486px;*/
            /*background-size: 512px;*/
        /*}*/
        /*.feiyong .feiyong_info{*/
            /*float: left;*/
            /*width: 50%;*/
            /*text-align: center;*/
            /*box-sizing: border-box;*/
            /*font-size: 0.7rem;*/
            /*padding: 10px 0;*/
        /*}*/
        /*.feiyong{background: #ffffff;overflow: hidden; position: relative}*/
        /*.feiyong:before{*/
            /*position:absolute;*/
            /*content: "";*/
            /*height:1px;*/
            /*background:#cccccc;*/
            /*width:100%;*/
            /*bottom:0px;*/
            /*-webkit-transform:scaleY(.5);*/
            /*-ms-transform:scaleY(.5);*/
            /*-o-transform:scaleY(.5);*/
            /*transform:scaleY(.5);*/
        /*}*/
        /*.feiyong .feiyong_info p{*/
            /*line-height: 30px;*/
        /*}*/
        /*.feiyong .feiyong_info:first-child{*/
            /*border-right: 1px solid #ccc;*/
        /*}*/
        /*body{background: #f5f5f5}*/
        /*.feiyong_info p:last-child{*/
            /*color: #dc0000;*/
        /*}*/
        /*.list{*/
            /*width: 100%;*/
            /*box-sizing: border-box;*/
            /*background: white;*/
            /*margin-top: 1px;*/
        /*}*/
        /*.list li p span:first-child{*/
            /*font-size: 15px;*/
        /*}*/
        /*.list li{*/
            /*color: black;*/
            /*border-bottom: 1px solid #cccccc;*/
            /*padding: 12px ;*/
            /*overflow: hidden;*/
        /*}*/
        /*.list li a{*/
            /*color: black;*/
        /*}*/
        /*.list li .list_left{*/
            /*float: left;*/
        /*}*/
        /*.list li .list_right{*/
            /*color: #777777;*/
            /*margin-top: 15px;*/
            /*float: right;*/
        /*}*/
        /*.list li .span1{*/
            /*color: orange;*/
        /*}*/
        /*.list li p:last-child{*/
            /*margin-top: 5px;*/
            /*color: #777;*/
            /*font-size: 13px;*/
        /*}*/
        /*.history{*/
            /*padding: 10px 0;*/
            /*padding-left: 10px;*/
            /*font-size: 0.75rem;*/
        /*}*/
    </style>
</head>
<body>
<div class="header">
    <i></i>
    <div class="center"><p class="active">商城收益</p><p>商圈收益</p></div>
    <p class="set">提现</p>
</div>
<div class="main">
    <div class="top">
        <p>武汉市消费总金额</p>
        <p>12100.00</p>
        <p>每月25结算</p>
    </div>
    <div class="top_bot">
        <ul>
            <li>
                <p>本月获得佣金</p>
                <p class="red">121.00元</p>
            </li>
            <li>
                <p>已获得总佣金</p>
                <p class="red">55124.00元</p>
            </li>
        </ul>
    </div>
    <h4>历史记录</h4>
    <div class="list">
        <ul>
            <li>
                <p>2017年1月收益</p>
                <p class="gray">总额: <span>￥55552.00</span> <strong class="green">佣金：<span >￥555.52</span></strong></p>
            </li>
            <li>
                <p>2016年12月收益</p>
                <p class="gray">总额: <span>￥55552.00</span> <strong class="green">佣金：<span >￥555.52</span></strong></p>
            </li>
            <li>
                <p>2016年11月收益</p>
                <p class="gray">总额: <span>￥55552.00</span> <strong class="green">佣金：<span >￥555.52</span></strong></p>
            </li>
        </ul>
    </div>
    <div class="footer">下拉显示更多</div>
</div>
<!--<div class="main1">-->
    <!--<div class="header_info">-->
        <!--<div class="header_info-top">-->
            <!--<div class="header_info_touxiang">-->
                <!--<img src="http://imgsize.ph.126.net/?enlarge=true&amp;imgurl=http://img1.ph.126.net/iI_w28S-bcAdsil0IWnuvg==/6632043032514661339.png_223x124x1x95.png" alt="">-->
            <!--</div>-->
            <!--<div class="header_info_name">-->
                <!--<p>方海军三新学堂先生<span>[见习分销]</span></p>-->
                <!--<p>加入时间 : <time>2016-11-12 14:01</time></p>-->
            <!--</div>-->
            <!--<div class="ionc">-->
                <!--<i></i>-->
            <!--</div>-->
        <!--</div>-->
        <!--<div class="feiyong">-->
            <!--<div class="feiyong_info">-->
                <!--<p>累计推广费用</p>-->
                <!--<p>0.00元</p>-->
            <!--</div>-->
            <!--<div class="feiyong_info">-->
                <!--<p>累计推广费用</p>-->
                <!--<p>0.00元</p>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
   <!--<div class="history">-->
      <!--本月收益-->
   <!--</div>-->
    <!--<div class="list">-->
        <!--<ul>-->
            <!--<li><a href="##">-->
                <!--<div class="list_left">-->
                    <!--<p><span>方海军</span> <span class="span1"> [一级分销]</span></p>-->
                    <!--<p>总消费额：￥<span>1111</span></p>-->
                <!--</div>-->
               <!--<div class="list_right">-->
                   <!--佣金： ￥<span>123111114</span>-->
               <!--</div>-->
            <!--</a>-->
            <!--</li>-->

            <!--<li><a href="##">-->
                <!--<div class="list_left">-->
                    <!--<p><span>方海军</span> <span class="span1"> [一级分销]</span></p>-->
                    <!--<p>总消费额：￥<span>1111</span></p>-->
                <!--</div>-->
                <!--<div class="list_right">-->
                    <!--佣金： ￥<span>123111114</span>-->
                <!--</div>-->
            <!--</a>-->
            <!--</li>-->
            <!--<li><a href="##">-->
                <!--<div class="list_left">-->
                    <!--<p><span>方海军</span> <span class="span1"> [一级分销]</span></p>-->
                    <!--<p>总消费额：￥<span>1111</span></p>-->
                <!--</div>-->
                <!--<div class="list_right">-->
                    <!--佣金： ￥<span>123111114</span>-->
                <!--</div>-->
            <!--</a>-->
            <!--</li>-->
            <!--<li><a href="##">-->
                <!--<div class="list_left">-->
                    <!--<p><span>方海军</span> <span class="span1"> [一级分销]</span></p>-->
                    <!--<p>总消费额：￥<span>1111</span></p>-->
                <!--</div>-->
                <!--<div class="list_right">-->
                    <!--佣金： ￥<span>123111114</span>-->
                <!--</div>-->
            <!--</a>-->
            <!--</li>-->
        <!--</ul>-->
    <!--</div>-->
<!--</div>-->
<!--<script>-->
    <!--$(function () {-->
        <!--$('.center p').on('click', function () {-->
            <!--$(this).addClass('active').siblings().removeClass('active')-->
        <!--})-->
    <!--})-->
<!--</script>-->
</body>
</html>